<template>
    <vxe-table :data="form" border :loading="loading">
        <vxe-table-column field="id" title="物品" min-width="220">
            <template #header>
                <span class="pull-left">物品</span>
                <el-button icon="el-icon-plus" type="primary" plain @click="addItem" class="pull-right">
                    添加
                </el-button>
            </template>
            <template #default="{row, rowIndex}">
                <select-item v-model="row.id" :type="item_type" :clearable="false" @input="syncItemType(rowIndex, row.id)" style="width: 190px;"></select-item>
            </template>
        </vxe-table-column>
        <vxe-table-column field="num" title="数量" width="140">
            <template #default="{row}">
                <el-input v-model.number="row.num" :min="1" placeholder="数量" style="width: 100px;"/> {{ getNumText(row.type, row.id) }}
            </template>
        </vxe-table-column>
        <vxe-table-column field="random_num" title="随机比例" width="220">
            <template #default="{row}">
                Min: <el-input v-model.number="row.random_num[0]" :min="1" placeholder="%" style="width: 60px;"/>
                Max: <el-input v-model.number="row.random_num[1]" :min="1" :max="100" placeholder="%" style="width: 60px;"/> %
            </template>
        </vxe-table-column>
        <vxe-table-column field="effective_time" title="过期时间" width="120">
            <template #default="{row}">
                <el-input v-model.number="row.effective_time" placeholder="秒" style="width: 80px;"/> 秒
            </template>
        </vxe-table-column>
        <vxe-table-column title="操作" width="50">
            <template #default="{row, rowIndex}">
                <el-button type="info" circle icon="el-icon-close" @click="delItem(rowIndex)" title="删除"></el-button>
            </template>
        </vxe-table-column>
    </vxe-table>
</template>

<script>
/*
* 使用时需要父组件调用子组件的submit方法
* */
export default {
    props: {
        value: {
            type: Array,
            default: [],
        },
        item_type: {
            type: Array,
            default: null,
        },
    },
    components: {

    },
    data() {
        return {
            loading: false,
            form: [],
            itemOptions: this.$store.state.item.options,
            rmbIds: [1006, 1015, 1016, 1017],
        }
    },
    computed: {
        items() {
            return this.$store.state.item.all;
        },
        itemsObj() {
            let obj = {};
            this.items.map(v => {
                v.type_name = this.itemOptions.type[v.type];
                obj[v.id] = v;
            })
            return obj;
        },
        // returnData() {
        //     return this.handleForm(this.form);
        // }
    },
    watch: {
        value(val, old) {
            if (val.length === old.length && val.filter(t => !old.includes(t))) return;
            this.syncForm();
        },
        // returnData(val, old) {
        //     this.$emit('input', val);
        // }
    },
    methods: {
        // 父组件触发提交
        submit() {
            this.loading = true;
            let form = this.handleForm();
            this.$emit('input', form);
        },
        syncForm() {
            if (!this.value.length) return ;
            let form = Array.from(this.value);
            this.form = form.map(v => {
                // if (!v.effective_time) v.effective_time = 0;
                if (!v.random_num) v.random_num = [0, 0];
                if (this.rmbIds.includes(v.id)) v.num /= 100;
                return v;
            });
        },
        // form 处理
        handleForm() {
            let form = Array.from(Object.assign([], this.form));

            form = form.map(v => {
                v.num = parseInt(v.num);

                if (v.random_num) {
                    v.random_num[0] = (!v.random_num[0] || isNaN(v.random_num[0])) ? 0 : parseInt(v.random_num[0]);
                    v.random_num[1] = (!v.random_num[1] || isNaN(v.random_num[1])) ? 0 : parseInt(v.random_num[1]);
                } else {
                    v.random_num = [0, 0];
                }
                v.is_random = v.random_num[0] > 0 || v.random_num[1] > 0;
                v.effective_time = isNaN(v.effective_time) ? 0 : parseInt(v.effective_time);
                if (this.rmbIds.includes(v.id))  v.num *= 100;
                delete v._X_ROW_KEY;
                return v;
            });
            return form;
        },
        addItem() {
            this.form.push({
                id: '',
                type: '',
                des: '',
                num: 0,
                is_random: false,
                random_num: [0, 0],
                effective_time: 0,
            });
        },
        delItem(index) {
            this.form.splice(index, 1);
        },
        getItems() {
            if (this.items.length < 1) this.$store.dispatch('item/All', 'item');
        },
        syncItemType(index, id) {
            if (this.$helper.isEmptyObj(this.itemsObj)) return;
            let item = this.itemsObj[id];
            this.form[index].type = item.type;
            this.form[index].des = item.des;
        },
        getNumText(type, id) {
            let text = '个';
            // 实物
            if (type === 3 && this.rmbIds.includes(id)) {
                text = '元';
            }
            return text;
        }
    },
    created() {
        this.getItems();
        this.syncForm();
    }
}
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
</style>

